<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, onUnmounted, ref } from 'vue'
import DescriptionCard from '@/components/animesummarypage/DescriptionCard.vue'
import { getAnimeSummaryRequest } from '@/api/anime.ts'
import { getRssDownloadInfos } from '@/api/torrent.ts'
import { createWebSocket } from '@/utils/websocketUtils.ts'
import { AnimeSummaryType, RssDownloadInfoType } from '@/type/typedefine.ts'
import RssDownloadInfoGroup from '@/components/animesummarypage/RssDownloadInfoGroup.vue'

const router = useRouter()
const route = useRoute()
function handleClick() {
  router.push('/home')
}

const summary = ref<AnimeSummaryType>({
  poster: '',
  title: '',
  subtitle: '',
  season: '',
  description: '',
  year: '',
  month: '',
  backgroundURL: '',
  backgroundColor: '',
  type: '',
})

const fileinfos = ref<RssDownloadInfoType[]>([])

const socket = ref<WebSocket | null>(null)
function handleWebsocketGetDownloadInfo(message: string) {
  try {
    const rssDownloadInfos: RssDownloadInfoType[] = JSON.parse(message)
    if (rssDownloadInfos === null || rssDownloadInfos.length === 0) {
      return
    }
    //更新下载信息
    for (let i = 0; i < rssDownloadInfos.length; i++) {
      const rssInfo = rssDownloadInfos[i]
      const index = fileinfos.value.findIndex((item) => item.id === rssInfo.id)
      if (index !== -1) {
        fileinfos.value[index] = rssInfo
      }
    }
  } catch (e) {
    console.error(e)
  }
}

onMounted(() => {
  const id = route.params.id as bigint
  getAnimeSummaryRequest(id).then((res) => {
    const animeSummary = res.data
    if (animeSummary) {
      summary.value = animeSummary
    }
  })

  getRssDownloadInfos(id).then((res) => {
    const rssinfo = res.data
    if (rssinfo) {
      fileinfos.value = rssinfo
    }
  })
  //初始化websocket
  socket.value = createWebSocket(
    'ws://localhost:8080/socket/downloadInfo/' + id,
  )
  if (socket.value) {
    socket.value.onmessage = (event) => {
      handleWebsocketGetDownloadInfo(event.data)
    }
  }
})

onUnmounted(() => {
  if (socket.value) {
    socket.value.close()
  }
})
</script>

<template>
  <v-sheet class="sheet" elevation="8">
    <v-container style="min-width: 900px; width: 100%; height: 100%">
      <v-row style="height: 80px; padding: 15px">
        <v-btn
          @click="handleClick"
          width="100"
          height="40"
          style="position: fixed; z-index: 1000; outline: none"
        >
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
      </v-row>
      <v-row>
        <DescriptionCard v-bind:anime-summary="summary"></DescriptionCard>
      </v-row>
      <v-list>
        <RssDownloadInfoGroup
          v-for="(rssInfo, index) in fileinfos"
          :key="index"
          v-bind:rss-download-info="rssInfo"
        ></RssDownloadInfoGroup>
      </v-list>
      <v-row style="margin-top: 20px"></v-row>
    </v-container>
  </v-sheet>
</template>

<style lang="scss" scoped>
$yearcolor: rgb(211, 211, 211);

.sheet {
  display: flex;
  justify-content: start;
  align-items: start;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.v-application .v-row {
  margin: 0;
  padding: 0;
}
</style>
